<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <h1>欢迎来到{{name}}联盟</h1>
        <a v-on:click="showInfo"
            href="https://fanyi.baidu.com/?aldtype=16047#en/zh/because%20the%20scheme%20does%20not%20have%20a%20registered%20handler.">点击1</a>
        <!-- 加入一个超链接增加了点击事件，那么事件发生就会进入它保存的链接内部 -->
        <!-- 在点击事件后面加个修饰符.prevent就能去掉默认事件，这是vue的一个事件修饰符号 -->
        <a v-on:click.prevent="showInfo"
            href="https://fanyi.baidu.com/?aldtype=16047#en/zh/because%20the%20scheme%20does%20not%20have%20a%20registered%20handler.">点击2</a>
        <!-- vue中事件修饰符有六个 -->
        1.prevent组织默认事件
        2.stop组织事件冒泡
        3.once事件只触发一次
        4.capture使用事件的捕获模式
        5.self只有event.target是当前操作的元素才触发事件
        6.passive事件的默认行为立刻触发。无需等待事件回调执行完毕
        <!-- 事件修饰符可以串起来 -->
    </div>
</body>
<script>
    Vue.config.productionTip = false;
    const vm = new Vue({
        el: '#root',
        data: {
            name: "德莱"
        },
        methods: {
            showInfo: function () {
                // 此处的this是vm或者组件实例对象，就是实例对象本身，箭头函数的话就是window
                alert("你好")
            },

        },
    })
</script>

</html>